<template>
  <div>
    <a-row type="flex" :gutter="16">
      <a-col :span="8" v-if="designMode === 'design'">
        <a-card title="设计" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="code" title="切换至参数模式" @click="switchMode('code')"></a-button>
          </template>
        </a-card>
      </a-col>
      <a-col :span="8" v-else-if="designMode === 'code'">
        <a-card title="参数" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="layout" title="切换至设计模式" @click="switchMode('design')"></a-button>
          </template>
          <vue-json-editor v-model="pageData" mode="code" @jsonChange="handleJsonChange" @hasError="onJsonError"></vue-json-editor>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="预览" class="card-holder">
          <div class="content-holder">
            <i-page :pageData="pageData" v-if="reloading === false"></i-page>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import IPage from '../../components/IPage'
import VueJsonEditor from '../../components/VueJsonEditor'
export default {
  name: 'PageLayout',
  components: {
    IPage, VueJsonEditor
  },
  data() {
    return {
      designMode: 'design',
      reloading: false,
      pageData: {
        title: '用户信息',
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        items: [
          {
            fieldId: 'name', fieldName: '姓名', fieldType: 'text', fieldValue: '张三'
          },
          {
            fieldId: 'gender', fieldName: '性别', fieldType: 'radio', fieldValue: 'secret',
            objectField: {
              options: [
                {label: '男', value: 'male'},
                {label: '女', value: 'female'},
                {label: '保密', value: 'secret'}
              ]
            }
          },
          {
            fieldId: 'age', fieldName: '年龄', fieldType: 'integer', fieldValue: 24
          },
          {
            fieldId: 'interests', fieldName: '兴趣爱好', fieldType: 'checkbox', fieldValue: ['sing', 'sports', 'movie'],
            objectField: {
              options: [
                {label: '唱歌', value: 'sing'},
                {label: '运动', value: 'sports'},
                {label: '户外', value: 'outdoor'},
                {label: '看电影', value: 'movie'},
                {label: '追剧', value: 'drama'}
              ]
            }
          },
          {
            fieldId: 'self_description', fieldName: '自我描述', fieldType: 'textarea', fieldValue: '这是一段自我描述。'
          },
          {
            fieldId: 'lucky_number', fieldName: '幸运数字', fieldType: 'number', fieldValue: 99
          },
          {
            fieldId: 'personal_assets', fieldName: '个人总资产', fieldType: 'currency', fieldValue: 999999999.99
          },
          {
            fieldId: 'birthday', fieldName: '出生日期', fieldType: 'date', fieldValue: '2019-09-20',
            objectField: {withTime: false}
          },
          {
            fieldId: 'notify_time', fieldName: '提醒时间', fieldType: 'date', fieldValue: new Date(),
            objectField: {withTime: true}
          },
          {
            fieldId: 'mobile', fieldName: '手机号码', fieldType: 'telephone', fieldValue: '13123456789',
            objectField: {showMask: true}
          },
          {
            fieldId: 'email', fieldName: '邮箱', fieldType: 'email', fieldValue: '123456@qq.com',
            objectField: {showMask: false}
          },
          {
            fieldId: 'profile', fieldName: '个人主页', fieldType: 'url', fieldValue: 'https://github.com/'
          },
          {
            fieldId: 'bio', fieldName: '个人简历', fieldType: 'file', fieldValue: [
              'https://wiki.oksales.net/download/attachments/327682/global.logo?version=2&modificationDate=1564643044944&api=v2',
              'https://wiki.oksales.net/download/attachments/327682/atl.site.logo?version=3&modificationDate=1564642939627&api=v2'
            ]
          },
          {
            fieldId: 'photos', fieldName: '生活照', fieldType: 'picture', fieldValue: [
              'https://wiki.oksales.net/download/attachments/327682/global.logo?version=2&modificationDate=1564643044944&api=v2',
              'https://wiki.oksales.net/download/attachments/327682/atl.site.logo?version=3&modificationDate=1564642939627&api=v2'
            ]
          },
          {
            fieldId: 'progress', fieldName: '达成进度', fieldType: 'percent', fieldValue: 99.9
          },
          {
            fieldId: 'married', fieldName: '是否已婚', fieldType: 'boolean', fieldValue: false
          }
        ]
      }
    };
  },
  methods: {
    reload() {
      this.reloading = true;
      this.$nextTick(() => {
        this.reloading = false;
      });
    },
    switchMode(mode) {
      this.designMode = mode;
    },
    handleJsonChange(json) {

    },
    onJsonError(json) {

    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bfbfbf;
}

.card-holder {
  height: calc(100vh - 160px);
}

.content-holder {
  height: calc(100vh - 264px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>